<script setup>
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { useUserStore } from '../../stores/userStore';

const router = useRouter();
const userStore = useUserStore();

// 用户数据
const user = ref({
  username: "admin",
  ipLocation: "辽宁省大连市",
  organization: "企业机构",
  phoneNumber: "15610565780",
  password: "******"
});

// 企业信息数据
const enterprise = ref({
  name: "大连素食有限公司",
  creditCode: "2012000043245689567",
  address: "辽宁省大连市金普新区和平路56号",
  type: "企业机构",
  nature: "私营企业",
  establishmentDate: "2021年-05月13日",
  legalPerson: "李华",
  legalPersonId: "210282198706235543",
  contactAddress: "辽宁省大连市金普新区和平路56号",
  businessScope: "饮食",
  introduction: "大连素食有限公司是一家致力于研究素食美味的公司",
  businessLicensePeriod: "2021/5/13 - 2028/5/13",
  bank: "大连银行",
  bankAccount: "63299427971907320931709",
  bankAddress: "辽宁省大连市金普新区农贸街65号",
  registrationPhone: "8657-4321",
  registrationAddress: "辽宁省大连市金普新区和平路56号",
  registeredCapital: "200.00",
  paidInCapital: "100.00"
});

// 当前选中的菜单项
const activeMenu = ref('0');

// 路由守卫
onMounted(() => {
  if (!userStore.isLoggedIn) {
    router.replace('/login');
  }
});
</script>

<template>
  <el-container style="height: 100vh;">
    <!-- 侧边导航栏 -->
    <el-aside width="220px" class="custom-aside">
      <div class="menu-item" @click="activeMenu = '1'">
        <el-icon><i class="el-icon-office-building"></i></el-icon>
        <span>企业信息</span>
      </div>
      <div class="menu-item" @click="activeMenu = '2'">
        <el-icon><i class="el-icon-suitcase"></i></el-icon>
        <span>参与投标</span>
      </div>
      <div class="menu-item" @click="activeMenu = '3'">
        <el-icon><i class="el-icon-document"></i></el-icon>
        <span>我的投标</span>
      </div>
    </el-aside>

    <!-- 主内容区 -->
    <el-main style="flex: 1; padding: 20px;">
      <!-- 用户信息卡片 -->
      <el-card v-if="activeMenu === '0'" class="profile-card" style="width: 600px; margin: 20px auto;">
        <div class="user-info">
          <p>用户名：{{ user.username }}</p>
          <p>ip属地：{{ user.ipLocation }}</p>
          <p>所属机构：{{ user.organization }}</p>
          <p>手机号：{{ user.phoneNumber }}</p>
          <p>当前密码：{{ user.password }}</p>
        </div>
      </el-card>

      <!-- 企业信息卡片 -->
      <el-card v-if="activeMenu === '1'" class="enterprise-info-card" style="width: 600px; margin: 20px auto;">
        <div class="enterprise-info">
          <p>企业名称：{{ enterprise.name }}</p>
          <p>统一社会信用代码：{{ enterprise.creditCode }}</p>
          <p>公司注册地址：{{ enterprise.address }}</p>
          <p>机构类型：{{ enterprise.type }}</p>
          <p>企业性质：{{ enterprise.nature }}</p>
          <p>成立日期：{{ enterprise.establishmentDate }}</p>
          <p>法人/负责人：{{ enterprise.legalPerson }}</p>
          <p>法人/负责人身份证：{{ enterprise.legalPersonId }}</p>
          <p>单位联系地址：{{ enterprise.contactAddress }}</p>
          <p>经营范围：{{ enterprise.businessScope }}</p>
          <p>公司简介：{{ enterprise.introduction }}</p>
          <p>营业执照有效期：{{ enterprise.businessLicensePeriod }}</p>
          <p>开户行：{{ enterprise.bank }}</p>
          <p>银行账号：{{ enterprise.bankAccount }}</p>
          <p>开户行地址：{{ enterprise.bankAddress }}</p>
          <p>单位注册电话：{{ enterprise.registrationPhone }}</p>
          <p>单位注册地址：{{ enterprise.registrationAddress }}</p>
          <p>注册资本（万元）：{{ enterprise.registeredCapital }}</p>
          <p>实缴资本：{{ enterprise.paidInCapital }}万元</p>
        </div>
      </el-card>
    </el-main>
  </el-container>
</template>

<style scoped>
.custom-aside {
  background-color: #1f7a8c;
  color: #fff;
  height: 100vh;
  padding-top: 20px;
}

.menu-item {
  display: flex;
  align-items: center;
  padding: 10px 20px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.menu-item:hover {
  background-color: #1b6a7c;
}

.menu-item .el-icon {
  margin-right: 10px;
  font-size: 20px;
}

.profile-card {
  background-color: #f9f9f9;
  border-radius: 8px;
}

.enterprise-info-card {
  background-color: #f9f9f9;
  border-radius: 8px;
}

.user-info p, .enterprise-info p {
  margin: 10px 0;
  font-size: 16px;
  color: #333;
}
</style>